<template>
    <div>
        <div class="c_box2">
           <div class="c_navbar">
            <p>Javascript教程</p>
           </div>
           <div class="c_content">
            <ul>
                <li class="c_work" @click="goHD()">
                    <i class="iconfont icon-xiezuoye"></i>
                    <div class="right_content">
                        <p class="c_work_name">Javascript数据类型</p>
                        <p class="c_staus">已完成</p>
                        <p class="c_time">完成时间:</p>
                    </div>
                </li>
            </ul>
           </div>
        </div>
    </div>
</template>

<script>
export default{
    name:'HomeWork',
    data(){
        return{
        }
    },
    components:{
    },
    methods: {
      goHD(){
        this.$router.push({
            path:'/homework'
        })
      }
    }
}
</script>

<style lang="scss" scoped>
    .c_box2{
        width: 100%;
        min-height: 800px;
        height: auto;
        background-color: white;
        border-radius: 20px;
        .c_navbar{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid #ccc;
            p{
               transform: translate(30px,25px);
               font-size: 20px;
            }
        }
        .c_content{
            width: 100%;
            height: 80%;
            margin-top: 5%;
            box-sizing: border-box;
            .c_work{
               width: 100%;
               height: 60px;
               margin-bottom: 5px;
               position: relative;
               cursor: pointer;
               .icon-xiezuoye{
                  position: absolute;
                  top: 15px;
                  left: 25px;
                  font-size: 50px;
               }
               .right_content{
                  width: 90%;
                  height: 100%;
                  margin-left:90px;
                  border-bottom: 1px solid #ccc;
                  position: relative;
                  .c_work_name{
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  }
                  .c_staus{
                    font-size: 14px;
                    height: 30px;
                    line-height: 30px;
                  }
                  .c_time{
                    position: absolute;
                    top: 30px;
                    right: 140px;
                    font-size: 14px;
                  }
               }
            }
            .c_work:hover{
                background-color: #F0F6FF;
                color:#3B90FF;
            }
        }
    }
</style>